import React, { ReactElement } from 'react'
import { Button, Row, Col, Tag, Input } from 'antd'
import Upload from './info/Upload'
import { connect } from 'umi'
import styles from './skin.less'

const { TextArea } = Input

interface Props {
    skills: Array<any>,
    addSkills: Function,
    delSkills: Function,
    changeSkills: Function
}

const list = [
    {
        title: "冷却值",
        type: 'ipt',
        classify: 'delay'
    },
    {
        title: "消耗",
        type: 'ipt',
        classify: 'cost'
    },
    {
        title: "技能描述",
        type: 'text',
        classify: 'desc'
    },
    {
        title: "小提示",
        type: 'text',
        classify: 'tips'
    }
]
function Index({ skills, addSkills, delSkills, changeSkills }: Props): ReactElement {
    return (
        <div>
            <Button onClick={() => {
                addSkills()
            }} type="primary"> + 技能名称</Button>
            <div>
                <Row>
                    {
                        skills.map((item, index) => {
                            return <Col key={index} span={12}>
                                <div className={styles.card}>
                                    <div className={styles.flex}>
                                        <span>
                                            <Tag color="processing">技能{index + 1}</Tag>
                                        </span>
                                    </div>
                                    <div className={styles.flex}>
                                        <span>
                                            皮肤名称:
                                        </span>
                                        <div>
                                            <Input onChange={(ev) => {
                                                changeSkills(index, "name", ev.target.value)
                                            }} />
                                        </div>
                                    </div>
                                    <div className={styles.flex}>
                                        <span>
                                            技能图标:
                                        </span>
                                        <div>
                                            <Upload index={index} icon="icon" action="skill" />
                                        </div>
                                    </div>
                                    {
                                        list.map((item, indexs) => {
                                            return <div key = { indexs } className={styles.flex}>
                                                <span>
                                                    { item.title }:
                                                </span>
                                                <div>
                                                    {
                                                        item.type === 'ipt'? <Input onChange={(ev) => {
                                                            changeSkills(index, item.classify, ev.target.value)
                                                        }}/>: <TextArea onChange={(ev) => {
                                                            changeSkills(index, item.classify, ev.target.value)
                                                        }} />
                                                    }
                                                </div>
                                            </div>
                                        })
                                    }
                                    <div className={styles.flex}>
                                        <span>
                                            <Button
                                                type="primary"
                                                danger
                                                onClick={() => {
                                                    delSkills(index)
                                                }}
                                            >删除皮肤</Button>
                                        </span>
                                    </div>
                                </div>
                            </Col>
                        })
                    }
                </Row>
            </div>
        </div>
    )
}

export default connect((state: any) => {
    console.log(state)
    const { hero } = state
    const { skills } = hero
    return {
        skills
    }
}, (dispatch) => {
    return {
        addSkills() {
            dispatch({ type: "hero/addSkills" })
        },
        delSkills(index: number) {
            dispatch({ type: "hero/delSkills", index })
        },
        changeSkills(index: number, classify: string, value: string) {
            dispatch({ type: "hero/changeSkills", index, classify, value })
        }
    }
})(Index)
